<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
ol,
ul,
li,
img {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  /*vertical-align: baseline;*/
  vertical-align: middle;
}

html * {
  font-family: "ff-din-web-pro-1", "ff-din-web-pro-2", sans-serif;
  font-size: 16px;
  line-height: 19.2px;
  color-profile: sRGB;
  /*color: #657b83;*/
}

body {
  min-width: 32em;
  max-width: 56em;
  margin: 10px auto;
}

p, blockquote p {
  line-height: 1.6;
}

ul, ol {
  margin: 16px 0;
}

ul li, ol li {
  line-height: 1.6;
}

p, li {
  font-weight: lighter;
  margin: 10px 0;
}

strong {
  font-weight: bold;
}

ol,
ul {
  margin-left: 2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: lighter;
  text-transform: capitalize;
  margin: 20px 0;
  border-bottom: 1px solid;
  padding-bottom: 6px;
}

h1, h1 > code {
  font-size: 24.624px;
  line-height: 29.548799999999996px;
}

h2, h2 > code {
  font-size: 24.624px;
  line-height: 29.548799999999996px;
}

h3, h3 > code {
  font-size: 23.44px;
  line-height: 28.128px;
}

h4, h4 > code {
  font-size: 22.16px;
  line-height: 26.592px;
}

h5, h5 > code {
  font-size: 22.16px;
  line-height: 26.592px;
}

h6, h6 > code {
  font-size: 22.16px;
  line-height: 26.592px;
}

img {
  margin-bottom: 20px;
}

h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img,
p img {
  margin-bottom: 0;
}

pre,
code {
  font-family: monospace, Consolas, "Source Code Pro", Arial, sans-serif;
  color: #aa5d00;
  /*color: #b58900;*/
  background-color: #eee8d5;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 12px;
  margin-bottom: 20px;
}

code {
  border-radius: 3px;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
}

h3,
h4,
h5,
h6 {
  border-bottom: none;
}

html body {
  background-color: #fdf6e3;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
  color: #586e75;
  border-color: #657b83;
}

html a,
html a:active,
html a:visited {
  color: #586e75;
  text-decoration: none;
  border-bottom: 1px dashed;
  border-radius: 2px;
}

html a:hover {
  background-color: #eee8d5;
}

blockquote a:hover {
  background-color: #fdf6e3;
}

html a,
html a:active,
html a:visited,
html code.url {
  color: #b58900;
}

html h1 {
  color: #b58900;
}

html h2,
html h3,
html h4,
html h5,
html h6 {
  color: #b58900;
}

/* QUOTES
=============================================================================*/
blockquote {
  border-left: 4px solid #b58900;
  padding: 12px;
  background: #eee8d5;
  border-bottom-right-radius: 2px;
}

blockquote code {
  background: #fdf6e3;
}

blockquote > :first-child {
  margin-top: 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* TABLES
=============================================================================*/
table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;
}

table td {
  word-break: break-word;
  line-height: 1.3;
}

table th {
  font-weight: bold;
  text-align: center !important;
  background-color: #eee8d5;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fdf6e3;
}

/* IMAGES
=============================================================================*/
img {
  max-width: 100%;
}

p > img {
  display: table;
  margin: 0 auto;
}

p code, li code, td code {
  padding: 1px 3px;
  border-radius: 3px;
}

.cp_embed_wrapper {
  margin: 20px 0;
}

.hljs {
  background: #eee8d5 !important;
}

@media screen and (min-width: 980px) and (max-width: 980px) {
  table thead tr th,
  table thead tr th > code,
  table tbody tr td,
  table tbody tr td > code,
  table tbody tr td > strong {
    font-size: 1.3em;
    line-height: 1.3;
  }

  p, p code,
  p strong, p strong > code,
  blockquote p {
    font-size: 1.3em;
    line-height: 1.6;
  }

  ul li, ol li {
    font-size: inherit;
  }

  pre > code,
  ul li pre > code,
  ol li pre > code,
  ul li > code,
  ol li > code {
    font-size: 1.3em;
    line-height: 1.3;
  }

  ul {
    margin-left: 3.4em;
  }

  ol {
    margin-left: 3.6em;
  }
}
</style>
<style type="text/css">
.highlight  { background: #ffffff; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #d14 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d14 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
.pl-c {
    color: #969896;
}

.pl-c1,.pl-mdh,.pl-mm,.pl-mp,.pl-mr,.pl-s1 .pl-v,.pl-s3,.pl-sc,.pl-sv {
    color: #0086b3;
}

.pl-e,.pl-en {
    color: #795da3;
}

.pl-s1 .pl-s2,.pl-smi,.pl-smp,.pl-stj,.pl-vo,.pl-vpf {
    color: #333;
}

.pl-ent {
    color: #63a35c;
}

.pl-k,.pl-s,.pl-st {
    color: #a71d5d;
}

.pl-pds,.pl-s1,.pl-s1 .pl-pse .pl-s2,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre,.pl-src,.pl-v {
    color: #df5000;
}

.pl-id {
    color: #b52a1d;
}

.pl-ii {
    background-color: #b52a1d;
    color: #f8f8f8;
}

.pl-sr .pl-cce {
    color: #63a35c;
    font-weight: bold;
}

.pl-ml {
    color: #693a17;
}

.pl-mh,.pl-mh .pl-en,.pl-ms {
    color: #1d3e81;
    font-weight: bold;
}

.pl-mq {
    color: #008080;
}

.pl-mi {
    color: #333;
    font-style: italic;
}

.pl-mb {
    color: #333;
    font-weight: bold;
}

.pl-md,.pl-mdhf {
    background-color: #ffecec;
    color: #bd2c00;
}

.pl-mdht,.pl-mi1 {
    background-color: #eaffea;
    color: #55a532;
}

.pl-mdr {
    color: #795da3;
    font-weight: bold;
}

.pl-mo {
    color: #1d3e81;
}
.task-list {
padding-left:10px;
margin-bottom:0;
}

.task-list li {
    margin-left: 20px;
}

.task-list-item {
list-style-type:none;
padding-left:10px;
}

.task-list-item label {
font-weight:400;
}

.task-list-item.enabled label {
cursor:pointer;
}

.task-list-item+.task-list-item {
margin-top:3px;
}

.task-list-item-checkbox {
display:inline-block;
margin-left:-20px;
margin-right:3px;
vertical-align:1px;
}
</style>
<base target=_blank>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="keywords" content="whjin,前端开发文档,html,css,javascript,canvas,jquery,vue.js,http,ajax,git,webpack">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="前端开发文档">
<meta name="author" content="whjin">
<link rel="shortcut icon" href="https://whjin.github.io/frontend-dev-doc/images/logo.png">
<a href="https://github.com/whjin" class="github-corner" aria-label="View source on GitHub" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/a11y-light.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.15.6/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script> 
</head>
<body>
<h1 id="css">CSS</h1>
<ul>
<li>介绍一下标准CSS的盒子模型？低版本IE的盒子模型有什么不同？</li></ul>
<blockquote>
<p>1、有两种，IE盒子模型、W3C盒子模型<br>2、盒模型：内容（<code>content</code>）、填充（<code>padding</code>）、边界（<code>margin</code>）、边框（<code>border</code>）<br>3、区别：IE的<code>content</code>部分把<code>border</code>和<code>padding</code>计算进去</p>
</blockquote>
<ul>
<li>CSS选择符有哪些？哪些属性可以继承？</li></ul>
<blockquote>
<p>1、ID选择器<br>2、类选择器<br>3、标签选择器<br>4、相邻选择器（<code>h1+p</code>）<br>5、子选择器（<code>ul&gt;li</code>）<br>6、后代选择器（<code>li a</code>）<br>7、通配符选择器（<code>*</code>）<br>8、属性选择器（<code>a[rel=&quot;external&quot;]</code>）<br>9、伪类选择器（<code>a:hover,li:nth-child</code>）</p>
<p>可继承的样式：<code>font-size</code>、<code>font-family</code>、<code>color</code>、<code>ul</code>、<code>li</code>、<code>dl</code>、<code>dd</code>、<code>dt</code><br>不可继承的样式：<code>border</code>、<code>padding</code>、<code>margin</code>、<code>width</code>、<code>height</code></p>
</blockquote>
<ul>
<li>CSS优先级如何计算？</li></ul>
<blockquote>
<p>优先级就近原则，同权重情况下样式定义最近者为准<br>载入样式以最后载入的定位为准</p>
<p>优先级为：<br>同权重：内联样式表（标签内部）&gt;嵌入样式表（当前文件）&gt;外部样式表（外部文件）<br><code>!important &gt; id &gt; class &gt; tag</code><br><code>!important</code>比内联优先级高</p>
</blockquote>
<ul>
<li>CSS3新增伪类有哪些？</li></ul>
<blockquote>
<p><code>p:first-of-type</code> 选择属于其父元素的首个<code>&lt;p&gt;</code>元素<br><code>p:last-of-type</code> 选择属于其父元素的最后<code>&lt;p&gt;</code>元素<br><code>p:only-of-type</code> 选择属于其父元素唯一的<code>&lt;p&gt;</code>元素<br><code>p:nth-child(2)</code> 选择属于其父元素的第二个子元素的每个<code>&lt;p&gt;</code>元素<br><code>::after</code>在元素之后添加内容，也可以用来做清除浮动<br><code>::before</code>在元素之前添加内容<br><code>::enabled ::disabled</code>控制表单控件的禁用状态<br><code>:checked</code>单选框或复选框被选中</p>
</blockquote>
<ul>
<li>水平居中：给<code>div</code>设置一个宽度，然后添加<code>margin: 0 auto</code>属性</li></ul>
<pre><code>div {
  width: 200px;
  margin: 0 auto;
}
</code></pre><ul>
<li>让绝对定位的<code>div</code>居中</li></ul>
<pre><code>div {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
}
</code></pre><ul>
<li>水平垂直居中一</li></ul>
<blockquote>
<p>确定容器的宽高<br>设置层的外边距 </p>
</blockquote>
<pre><code>div {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
  background: #ccc;
}
</code></pre><ul>
<li>水平垂直居中二</li></ul>
<blockquote>
<p>未知容器的宽高，利用<code>transform</code>属性</p>
</blockquote>
<pre><code>div {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bbb;
}
</code></pre><ul>
<li>水平垂直居中三</li></ul>
<blockquote>
<p>利用<code>flex</code>布局<br>实际使用时应考虑兼容性</p>
</blockquote>
<pre><code>body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background: green;
}

span {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}
</code></pre><ul>
<li><code>display</code>有哪些值？说明它们的作用？</li></ul>
<blockquote>
<p><code>block</code>块类型。默认宽度为父元素宽度，可设置宽高，换行显示。<br><code>none</code>缺省值。像行内元素类型一样显示。<br><code>inline</code>行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。<br><code>inline-block</code>默认宽高为内容宽度，可以设置宽高，同行显示。<br><code>list-item</code>像块类型元素一样显示，并添加样式列表标记。<br><code>table</code>此元素会作为块级表格显示。<br><code>inherit</code>规定应该从父元素继承<code>display</code>属性的值。</p>
</blockquote>
<ul>
<li><code>position</code>的值<code>relative</code>和<code>absolute</code>定位原点？</li></ul>
<blockquote>
<p><code>absolute</code>生成绝对定位的元素，相对于值不为<code>static</code>的第一个父元素进行定位<br><code>fixed</code>（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位<br><code>relative</code>生成相对定位的元素，相对于其正常位置进行定位<br><code>static</code>默认值。没有定位，元素出现在正常的流中（忽略<code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code>声明）<br><code>inherit</code>规定从父元素继承<code>position</code>属性的值</p>
</blockquote>
<ul>
<li>CSS3有哪些新特性？</li></ul>
<blockquote>
<p>新增各种CSS选择器（<code>:not(.input)</code>）：所有<code>class</code>不是<code>input</code>的节点<br>圆角<code>border-radius:8px;</code><br>多列布局<code>multi-column layout</code><br>阴影和反射<code>shadow\reflect</code><br>文字特效<code>text-shadow</code><br>文字渲染<code>text-decoration</code><br>线性渐变<code>gradient</code><br>旋转<code>transform</code><br>缩放、定位、倾斜、动画、多背景<br>例如：</p>
</blockquote>
<pre><code>transform:\scale(0.85,0.90)\translate(0,-30px)\skew(-9deg,0)\animation
</code></pre><ul>
<li>请解释一下CSS3的<code>flexbox</code>（弹性盒布局模型），以及适用场景？</li></ul>
<blockquote>
<p>一个用于页面布局的全新CSS3功能，<code>flexbox</code>可以把列表放在同一个方向（从上到下，从左到右），并让列表能延伸到占用可用的空间。<br>较为复杂的布局还可以通过嵌套一个伸缩容器（<code>flex container</code>）来实现。<br>采用<code>flex</code>布局的元素，称为<code>flex</code>容器（<code>flex container</code>），简称<code>容器</code><br>它的所有子元素自动称为容器成员，称为<code>flex</code>项目（<code>flex item</code>），简称<code>项目</code><br>常规布局是基于块和内联流方向，而<code>flex</code>布局是基于<code>flex-flow</code>流，可以很方便地用来做居中，能对不同屏幕大小自适应。</p>
</blockquote>
<ul>
<li>用纯CSS创建一个三角形的原理是什么？</li></ul>
<blockquote>
<p>把上、左、右三条边隐藏掉（颜色设为<code>transparent</code>）</p>
</blockquote>
<pre><code>div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent red transparent;
}
</code></pre><ul>
<li>如何设计一个满屏<code>品</code>字布局？    </li></ul>
<blockquote>
<p>简单方式：<br>上面的<code>div</code>宽<code>100%</code><br>下面的两个<code>div</code>分别宽<code>50%</code><br>然后用<code>float</code>或者<code>inline</code>使其不换行即可</p>
</blockquote>
<pre><code>body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 300px;
    background: green;
}

.left {
    width: 50%;
    height: 300px;
    background: aqua;
    float: left;
}

.right {
    width: 50%;
    height: 300px;
    background: blue;
    float: right;
}
</code></pre><ul>
<li>如何实现CSS多列等高？</li></ul>
<blockquote>
<p>利用<code>padding-bottom|margin-bottom</code>正负值相抵；<br>设置父容器超出隐藏<code>overflow:hidden;</code>，这样子父容器的高度还是它里面的列没有设定<code>padding-bottom</code>时的高度；<br>当它里面的任何一列高度增加，则父容器的高度被撑开到里面最高那一列的高度<br>其他比这列低的会用它们的<code>padding-bottom</code>补偿这部分的高度差</p>
</blockquote>
<pre><code>body {
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.left {
    float: left;
    width: 30%;
    height: 100px;
    background: aqua;
    padding-bottom: 200px;
    margin-bottom: -200px;
}

.right {
    float: right;
    width: 70%;
    height: 200px;
    background: #6cc;
    padding-bottom: 200px;
    margin-bottom: -200px;
}
</code></pre><ul>
<li>经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么？常用hack技巧？</li></ul>
<blockquote>
<p><code>png24</code>位的图片在IE6浏览器上出现背景，解决方案是做成<code>png8</code><br>浏览器默认的<code>margin</code>和<code>padding</code>不同。解决方案是加一个全局<code>{margin:0;padding:0;}</code>来统一<br>IE6双边距<code>bug</code>块属性标签<code>float</code>后，又有横行的<code>margin</code>情况下，在IE6显示<code>margin</code>比设置的大<br>浮动IE产生的双倍距离</p>
</blockquote>
<pre><code>#box {
    float: left;
    width: 10px;
    margin: 0 0 0 100px;
}
</code></pre><blockquote>
<p>这种情况下IE会产生<code>20px</code>的距离，解决方案是在<code>float</code>的标签样式控制中加入<code>_display:inline;</code>将其转化为行内属性。（<code>_</code>这个符号只有IE6会识别）<br>渐进识别的方式，从总体中逐渐排除局部。<br>首先，巧妙地使用<code>\9</code>这一标记，将IE浏览器从所有情况中分离出来。<br>接着，再次使用<code>+</code>将IE8和IE7、IE6分离开来，这样IE8已经独立识别。</p>
</blockquote>
<pre><code>div {
    background-color: red; /*所有识别*/
    background-color: #00deff \9; /*IE6、7、9识别*/
    _background-color: #1e0bd1; /*IE6识别*/
}
</code></pre><blockquote>
<p>IE下可以使用获取常规属性的方法来获取自定义属性，也可以使用<code>getAttribute()</code>获取自定义属性；<br>firefox下只能使用<code>getAttribute()</code>获取自定义属性<br>解决方法：统一通过<code>getAttribute()</code>获取自定义属性</p>
<p>IE下<code>event</code>对象有<code>x</code>、<code>y</code>属性，但是没有<code>pageX</code>、<code>pageY</code>属性；<br>Firefox下<code>event</code>对象有<code>pageX</code>、<code>pageY</code>属性，但是没有<code>x</code>、<code>y</code>属性<br>解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数</p>
<p>chrome中文界面下默认会将小于<code>12px</code>的文本强制按照<code>12px</code>显示<br>可通过加入CSS属性<code>-webkit-text-size-adjust:none;</code>解决</p>
<p>超链接访问过后<code>hover</code>样式不出现，被点击访问过的超链接样式不再具有<code>hover</code>和<code>avtive</code>。<br>解决方法：改变CSS属性的排列顺序。</p>
</blockquote>
<pre><code>L-V-H-A：a:link{} a:visited{} a:hover{} a:active{}
</code></pre><ul>
<li><code>li</code>与<code>li</code>之间有看不见的空白间隔是什么原因引起的？有什么解决办法？</li></ul>
<blockquote>
<p>行框的排列会受到中间空白（回车/空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为<code>0</code>，就没有空格。</p>
</blockquote>
<ul>
<li>为什么要初始化CSS样式？</li></ul>
<blockquote>
<p>浏览器有兼容问题，不同浏览器对有些标签的默认值不同，没有CSS初始化会出现浏览器之间的页面显示差异。</p>
<p>初始化样式会对SEO有一定的影响，尽量在影响最小的情况下进行初始化。</p>
</blockquote>
<ul>
<li><code>absolute</code>的<code>containing block</code>（容器块）计算方式跟正常流有什么不同？</li></ul>
<blockquote>
<p>无论属于哪种，都要先找到其祖先元素中最近的<code>position</code>值不为<code>static</code>的元素，然后再判断：<br>1、若此元素为<code>inline</code>元素，则<code>containing block</code>为能够包含这个元素生成的第一个和最后一个<code>inline box</code>的<code>padding box</code>（除<code>margin</code>，<code>border</code>外的区域）的最小矩形；<br>2、否则由这个祖先元素的<code>padding box</code>构成<br>如果都找不到，则为<code>initial containing block</code></p>
<p>补充：<br>1、<code>static/relative</code>，它的父元素的内容框（即去掉<code>padding</code>的部分）<br>2、<code>absolute</code>：向上找最近的定位为<code>absolute、relative</code>的元素<br>3、<code>fixed</code>：它的<code>containing block</code>一律为根元素（<code>html/body</code>），根元素也是<code>initial containing block</code></p>
</blockquote>
<ul>
<li>CSS里的<code>visibility</code>属性有个<code>collapse</code>属性值的作用？在不同浏览器下有什么区别？</li></ul>
<blockquote>
<p>对于普通元素<code>visibility:collapse;</code>会将元素完全隐藏，不占据页面布局空间，与<code>display:none;</code>表现相同。如果目标元素为<code>table</code>，<code>visibility:collapse;</code>将<code>table</code>隐藏，但是会占据页面布局空间。仅在Firefox下起作用，IE会显示元素，Chrome会将元素隐藏，但是占据空间。</p>
</blockquote>
<ul>
<li><code>position</code>跟<code>display</code>、<code>margin collapse</code>、<code>overflow</code>、<code>float</code>这些特性相互叠加后会怎样？</li></ul>
<blockquote>
<p>如果元素的<code>display</code>为<code>none</code>，那么元素不被渲染，<code>position</code>，<code>float</code>不起作用；<br>如果元素拥有<code>position:absolute;</code>或<code>position:fixed;</code>属性，那么元素将为绝对定位，<code>float</code>不起作用。<br>如果元素<code>float</code>属性不是<code>none</code>，元素会脱离文档流，根据<code>float</code>属性值来显示。有浮动、绝对定位，<code>inline-block</code>属性的元素，<code>margin</code>不会和垂直方向上的其他元素<code>margin</code>折叠。</p>
</blockquote>
<ul>
<li>对BFC规范（块级格式化上下文）的理解？</li></ul>
<blockquote>
<p>它是一个独立容器，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。<br>一个页面是由多个Box组成，元素的类型和<code>display</code>属性，决定了这个Box的类型<br>不同类型的Box会参与不同的<code>Formatting Context</code>（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会相互影响。</p>
</blockquote>
<ul>
<li>CSS定义的权重</li></ul>
<blockquote>
<p>权重的规则：标签的权重为<code>1</code>，<code>class</code>的权重为<code>10</code>，<code>id</code>的权重为<code>100</code>。</p>
</blockquote>
<ul>
<li>请解释一下为什么需要清除浮动？清除浮动的方法？</li></ul>
<blockquote>
<p>清除浮动是为了清除使用浮动元素产生的影响。<br>浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。</p>
<p>1、父级<code>div</code>定义<code>height</code>；<br>2、父级<code>div</code>也一起浮动；<br>3、常规的使用一个<code>class</code>；</p>
</blockquote>
<pre><code>.clearfix:before, .clearfix:after {
    content: &#39;&#39;;
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
</code></pre><blockquote>
<p>SASS编译的时候，浮动元素的父级<code>div</code>定义伪类<code>:after</code></p>
</blockquote>
<pre><code>div:after, div:before {
    content: &#39;&#39;;
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
</code></pre><blockquote>
<p>解析原理：<br>1、<code>displa:block;</code>使生成的元素以块级元素显示，占满剩余空间；<br>2、<code>height:0</code>避免生成内容破坏原有布局的高度；<br>3、<code>visibility:hidden;</code>使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；<br>4、通过<code>content:&quot;.&quot;</code>生成内容作为最后一个元素，<br>5、<code>zoom:1;</code>触发IE <code>hasLayout</code></p>
</blockquote>
<p>通过分析发现，除了<code>clear:both</code>用来闭合浮动，其他代码都是为了隐藏<code>content</code>生成的内容，这也是其他版本的闭合浮动为什么有<code>font-size:0</code>，<code>line-height:0</code></p>
<ul>
<li>什么是外边距合并？</li></ul>
<blockquote>
<p>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。<br>合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者</p>
</blockquote>
<ul>
<li><code>zoom:1</code>的清除浮动原理？</li></ul>
<blockquote>
<p>清除浮动，触发<code>hasLayout</code>；<br><code>zoom</code>属性时IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决IE存在的<code>bug</code><br>比如外边距的重叠，浮动清除，触发IE的<code>hasLayout</code>属性等</p>
<p>当设置了<code>zoom</code>的值后，所设置的元素就会扩大或缩小，高度宽度就会重新计算，一旦改变<code>zoom</code>值时也会发生重新渲染，运用这个原理解决IE中子元素浮动时父元素不随着自动扩大的问题。</p>
<p>目前非IE浏览器不支持这个属性，可以通过CSS3中的动画属性<code>scale</code>进行缩放。</p>
</blockquote>
<ul>
<li>浏览器如何解析CSS选择器？</li></ul>
<blockquote>
<p>从关键选择器开始匹配，然后左移查找规则选择器祖先元素。<br>只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或因为不匹配而放弃规则。</p>
</blockquote>
<ul>
<li><code>margin</code>和<code>padding</code>分别适用什么场景？</li></ul>
<blockquote>
<p><code>margin</code>用来隔开元素与元素的间距；<br><code>padding</code>用来隔开元素与内容的间隔；<br><code>margin</code>用于布局分开元素使元素与元素互不相干；<br><code>padding</code>用于元素与内容之间的间隔，让内容与元素之间有一段距离</p>
</blockquote>
<ul>
<li><code>::before</code>和<code>:after</code>中双冒号和单冒号有什么区别？解释一下这两个伪类的作用？</li></ul>
<blockquote>
<p>单冒号（<code>:</code>）用于CSS3伪类，双冒号（<code>::</code>）用于CSS3伪元素。（伪元素由双冒号和伪元素组成）<br>双冒号是在当前规范中引入的，用于区分伪类和伪元素。</p>
</blockquote>
<ul>
<li>如何修改Chrome记住密码后自动填充表单的黄色背景？</li></ul>
<pre><code>input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 250, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}
</code></pre><ul>
<li>设置元素浮动后，该元素的<code>display</code>值是多少？</li></ul>
<blockquote>
<p>自动变成<code>display:block</code></p>
</blockquote>
<ul>
<li>如何让Chrome支持小于<code>12px</code>的文字？</li></ul>
<blockquote>
<p>1、使用图片：如果是内容固定不变的情况下，使用将小于<code>12px</code>文字内容切出做图片，这样既兼容又美观。<br>2、使用<code>12px</code>字体大小样式设置，如果不考虑Chrome可以不用考虑兼容同时在设置小于<code>12px</code>对象设置<code>-webkit-text-adjust:none</code>，做到最大兼容考虑。<br>4、使用<code>12px</code>以上字体，重新考虑权重下兼容性。</p>
</blockquote>
<ul>
<li>如何用CSS让页面的字体变得清晰，变细？</li></ul>
<pre><code>-webkit-font-smoothing: antialiased;
</code></pre><ul>
<li><code>position:fixed;</code>在Android下无效如何处理？</li></ul>
<blockquote>
<p><code>fixed</code>的元素是相对整个页面固定位置，在屏幕上滑动只是在移动这个所谓的<code>viewport</code><br>并不是IOS不支持<code>fixed</code>，只是<code>fixed</code>的元素不是相对手机屏幕固定的。</p>
</blockquote>
<ul>
<li>手动写动画，最小时间间隔是多少？</li></ul>
<blockquote>
<p>多数显示器默认频率是<code>60Hz</code>，即1秒刷新<code>60</code>次，所以理论上最小间隔为<code>1/60*1000ms=16.7ms</code></p>
</blockquote>
<ul>
<li><code>display:inline-block</code>什么时候会显示间隙？</li></ul>
<blockquote>
<p>移除空格、使用<code>margin</code>负值、使用<code>font-size:0</code>、<code>letter-spacing</code>、<code>word-spacing</code></p>
</blockquote>

</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
